<script>
	import { updateConfirmStatus } from '@/api/login.js';
	import h5Url from '@/util/config.js';
	export default {
		data() {
			return {
				webSocket: null,
				message: ''
			}
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			// this.connectWebSocket();
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			connectWebSocket() {
				uni.connectSocket({
					url: 'wss://'+ h5Url.h5Url +'/websocket/repairorder/' + uni.getStorageSync('userInfo').id
				});
				uni.onSocketOpen(function(res) {
					console.log('WebSocket连接已打开！', res);
				});
				//连接发生错误
				uni.onSocketError(function(res) {
					console.log('监听 WebSocket 错误，重新发起连接', res);
					uni.connectSocket({
						url: 'wss://'+ h5Url.h5Url +'/websocket/repairorder/' + uni.getStorageSync('userInfo').id
					});
				});
				//接收消息
				uni.onSocketMessage(function(res) {
					console.log('接受 WebSocket 消息！', JSON.parse(res.data));
					let shouArr = JSON.parse(res.data);
					let that = this;
					let token = uni.getStorageSync('userToken');
					if (token) {
						if(uni.getStorageSync('userInfo').isMaster != 1) {
							if(shouArr.length > 0) {
								uni.showModal({
									title: '请确认本次服务?',
									content: '如您在72小时内未确认，则自动完成!',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
											console.log(shouArr);
											const pmm = {
												orderId:shouArr[0].id,
												confirmStatus:1
											};
											updateConfirmStatus(pmm).then(resaa=>{
												if(resaa.code == 200) {
													that.connectWebSocket();
												} else {
													uni.$u.toast(resaa.msg);
												}
											});
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}
						}
					} else {
						console.log('登录过期scoket终止');
					}
				});
				//监听 WebSocket 关闭
				uni.onSocketClose(function(res) {
					console.log('监听 WebSocket 关闭', res);
					uni.connectSocket({
						url: 'wss://'+ h5Url.h5Url +'/websocket/repairorder/' + uni.getStorageSync('userInfo').id
					});
				});
				return;
				console.log(231234)
				// 创建WebSocket连接
				this.webSocket = new WebSocket('wss://zyw.natappvip.cc/dev-api/websocket/repairorder/' + uni
					.getStorageSync('userInfo').id);
				// 监听打开事件
				this.webSocket.onopen = () => {
					console.log('WebSocket连接已打开');
					// 可以在这里发送初始消息
					// this.webSocket.send('你的初始消息');
				};
				// 监听消息事件
				this.webSocket.onmessage = (event) => {
					console.log('收到消息:', event.data);
					this.message = event.data; // 更新数据到视图
				};
				// 监听错误事件
				this.webSocket.onerror = (error) => {
					console.error('WebSocket错误:', error);
				};
				// 监听关闭事件
				this.webSocket.onclose = () => {
					console.log('WebSocket连接已关闭');
				};
			},
			sendMessage(text) {
				if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
					this.webSocket.send(text); // 发送消息
				} else {
					console.error('WebSocket未连接');
				}
			},
			disconnectWebSocket() {
				if (this.webSocket) {
					this.webSocket.close(); // 关闭WebSocket连接
				}
			}
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	.slot-content .u-button {
		border-width: 0 !important;
		display: block !important;
		height: auto !important;
		text-align: center !important;
		justify-content: inherit !important;
		align-items: inherit !important;
		padding: 0 !important;
		color: #665CF6 !important;
	}
	.flexxx{
		display: flex;flex-direction: row;
	}
	.commonPop .u-popup__content {
		border-radius: 32rpx 32rpx 0 0;
	}

	.joinWrap .u-upload__wrap__preview {
		margin: 0 !important;
	}

	.joinWrap .u-upload__wrap__preview__other {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	.joinWrap .u-upload__wrap {
		align-items: center;
	}

	.rightInfo button {
		border-width: 0 !important;
		display: block !important;
		height: auto !important;
		text-align: center !important;
		justify-content: inherit !important;
		align-items: inherit !important;
		padding: 0 !important;
		font-size: 30rpx !important;
		color: #333 !important;
		background-color: #fff !important;
		line-height: 88rpx !important;
		border-radius: 0 !important;
		height: 88rpx !important;
		;
	}

	.guanBox button {
		border-width: 0 !important;
		display: block !important;
		height: auto !important;
		text-align: center !important;
		justify-content: inherit !important;
		align-items: inherit !important;
		padding: 0 !important;
		font-size: 30rpx !important;
		color: #333 !important;
		background-color: #fff !important;
		line-height: 48rpx !important;
		border-radius: 0 !important;
	}

	.wuWarp button {
		border-width: 0 !important;
		display: block !important;
		height: 104rpx !important;
		text-align: left !important;
		justify-content: inherit !important;
		align-items: inherit !important;
		padding: 0 !important;
		font-size: 30rpx !important;
		color: #333 !important;
		background-color: #fff !important;
		line-height: 104rpx !important;
		border-radius: 0 !important;
	}

	.guanWrap button {
		border-width: 0 !important;
		display: block !important;
		height: 48rpx !important;
		text-align: left !important;
		justify-content: inherit !important;
		align-items: inherit !important;
		padding: 0 !important;
		font-size: 30rpx !important;
		color: #333 !important;
		background-color: #fff !important;
		line-height: 48rpx !important;
		border-radius: 0 !important;
	}

	.chartBtn button {
		border-width: 0 !important;
		display: block !important;
		height: 80rpx !important;
		text-align: left !important;
		justify-content: inherit !important;
		align-items: inherit !important;
		padding: 0 !important;
		font-size: 24rpx !important;
		color: #17181B !important;
		background-color: transparent !important;
		line-height: 80rpx !important;
		border-radius: 0 !important;
	}

	.guanBox button::after,
	.wuWarp button::after,
	.chartBtn button::after,
	.guanWrap button::after,
	.rightInfo button::after {
		height: auto !important;
		border: none !important;
	}

	.cxxx .u-modal__content {
		padding: 30rpx 0 0rpx !important;
	}

	.schuledList2 .u-radio-group {
		flex-direction: column !important;
	}

	.schuledList2 .u-radio {
		margin-bottom: 32rpx;
	}

	.twoBotom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0px -2px 8px 0px #0000000A;
		z-index: 99999;
		box-shadow: 0px 0px 12px -4px #00000008;
		height: 180rpx;
		background-color: #fff;

		.twoBtn {
			background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);
			height: 80rpx;
			text-align: center;
			margin: 18rpx 28rpx 0 22rpx;
			@include baseFont(30rpx, #fff, 80rpx);
			border-radius: 68rpx;
		}
	}
</style>